<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<style type="text/css">
    html{
        background-color: #ffffff;
    }
    .layui-form-item .layui-inline{
        margin-bottom: 0px;
        margin-right: 0px;
    }
</style>
<body>
<form class="layui-form myData layui-form-pane" lay-filter="stuform" style="text-align: left;padding-top: 5%;">
    <div class="layui-col-md8 layui-col-md-offset2" style="padding-right: 110px;padding-left: 15%;">
        <input type="hidden" name="id" th:value="${model.id}" id="id"/>
        <input type="hidden" name="uuid" th:value="${model.uuid}" id="fileuuid"/>
        <input type="hidden" th:value="${model.intro}" id="intro"/>

        <div class="layui-form-item">
            <div class="layui-inline">
            <label class="layui-form-label">书名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookName" lay-verify="required"
                           placeholder="请输入书名" th:value="${model.bookName}" class="layui-input"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">作者：</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" lay-verify="required"
                           placeholder="请输入作者" th:value="${model.author}" class="layui-input"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">出版社：</label>
                <div class="layui-input-inline">
                    <input type="text" name="press" lay-verify="required"
                           placeholder="请输入出版社" th:value="${model.press}" class="layui-input"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">图书类型：</label>
                <div class="layui-input-inline">
                    <select name="type">
                        <option></option>
                        <option th:each="t:${bookType}" th:value="${t.id}"
                                th:selected="${model.typeName==null? null: model.typeName==t.type}"
                                th:text="${t.type}">图书类型
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">ISBN码：</label>
                <div class="layui-input-inline">
                    <input type="text" name="isbn" lay-verify="required"
                           placeholder="请输入ISBN码" th:value="${model.isbn}" class="layui-input"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">价格：</label>
                <div class="layui-input-inline">
                    <input type="number" name="price" lay-verify="required"
                           placeholder="请输入价格" th:value="${model.price}" class="layui-input"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">简介：</label>
            <div class="layui-input-block">
                <textarea type="text" name="intro" lay-verify="required" id="inval" th:value="${model.intro}" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">封面图片：</label>
                <div class="layui-upload-drag layui-input-inline col-sm-9" id="uploading">
                    <div th:if="${model.uuid==null}">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>
                    <div th:if="${model.uuid!=null}">
                        <img alt="" th:src="'download?uuid='+${model.uuid}" width="100px" height="100px" title="点击重新选择">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript">
    layui.config({
        base: '../../static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(["upload","form",'jquery'], function () {
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.jquery;

        var intro = $("#intro").val();
        $("#inval").val(intro);

        form.render();

        //拖拽上传
        var uploadInst = upload.render({
            elem: '#uploading',
            url: 'upload',
            data: {
              id: function () {
                  return $('#id').val();
              }
            },
            done: function(res){
                if(res.success){
                    console.log(res);
                    $("#fileuuid").val(res.msg);
                    $("#id").val(res.id);
                    $("#uploading").html('<img alt="" src="download?uuid='+res.msg+'" width="100px" height="100px" title="点击重新选择">' );
                }else{
                    layer.open({
                        title: '上传失败'
                        ,content: res.msg
                        ,time: 2000
                    });
                }
            }
        });
    });
</script>
</body>
</html>